<template>
    <div class="mines">
        <div class="header">
            <div class="user">
                <img src="https://img02.camel.com.cn/image/headportrait345.png" alt="" class="user_img">
                <div v-if="$store.state.mine.showMine">
                    <p>{{users.name}}</p>
                    <p style="height:15px;width:30px;border:1px solid #fff;border-radius:5px;font-size:12px;text-align:center;">驼客</p>
                </div>
                <div v-else>
                    <p @click="goLogin()">登录/注册</p>
                </div>
            </div>
        </div>
        <div class="elsea">
            <ul class="tops" style="background-color:#fff;">
                <li class="item">
                    <p class="dingdan">我的订单</p>
                    <p class="more">更多</p>
                </li>
            </ul>
            <ul style="background-color:#fff;">
                <li class="items" :class="{bor_bot:index==5}" v-for="(item,index) in dingdan" :key="index">
                    <div :class="{items_wp:index!=5}" class="last">
                        <div class="item_left">
                            <img :src=item.img alt="" class="fon_img">
                            <p class="dingdans">{{item.title}}</p>
                        </div>
                        <img class="fons_img" src="" alt="">
                    </div>
                </li>
            </ul>
            <ul class="tops" style="background-color:#fff;">
                <li class="item">
                    <p class="dingdan">我的特权</p>
                </li>
            </ul>
            <ul style="background-color:#fff;">
                <li class="items bor_bot">
                    <div class="last">
                        <div class="item_left ">
                            <img src="../../static/img/fabugonggao.png" alt="" class="fon_img">
                            <p class="dingdans">推手赚钱</p>
                        </div>
                        <img class="fons_img" src="" alt="">
                    </div>
                </li>
            </ul>
            <ul class="tops" style="background-color:#fff;">
                <li class="item">
                    <p class="dingdan">我的服务</p>
                </li>
            </ul>
            <ul style="background-color:#fff;">
                <li class="items" :class="{bor_bot:index==5}" v-for="(item,index) in fuwu" :key="index">
                    <div :class="{items_wp:index!=5}" class="last">
                        <div class="item_left">
                            <img :src=item.img alt="" class="fon_img">
                            <p class="dingdans">{{item.title}}</p>
                        </div>
                        <img class="fons_img" src="" alt="">
                    </div>
                </li>
            </ul>
            <ul style="background-color:#fff;margin-top: 0.054rem;" v-if="$store.state.mine.showMine">
                <li class="items">
                    <div class="last">
                        <div class="item_left" @click="outLogin()">
                            <img src="../../static/img/tui.png" alt="" class="fon_img">
                            <p class="dingdans">退出登录</p>
                        </div>
                    </div>
                </li>
            </ul>
            <div class="mar_bot"></div>
        </div>
    </div>
</template>

<script>
import { mapMutations } from "vuex";
export default {
    data() {
        return {
            dingdan: [
                { img: "../../static/img/DDGL.png", title: "预售订单" },
                { img: "../../static/img/daifukuan.png", title: "代付款" },
                { img: "../../static/img/daifahuo.png", title: "代发货" },
                { img: "../../static/img/yifahuodefuben.png", title: "已发货" },
                { img: "../../static/img/daipingjia01.png", title: "待评价" },
                { img: "../../static/img/aftersales.png", title: "退款/售后" }
            ],
            fuwu: [
                { img: "../../static/img/6zaixiankefu.png", title: "在线客服" },
                { img: "../../static/img/youhuiquan.png", title: "优惠券" },
                { img: "../../static/img/xin.png", title: "收藏夹" },
                { img: "../../static/img/dizhi.png", title: "地址管理" },
                {
                    img: "../../static/img/accountsecuriyt.png",
                    title: "账户安全"
                },
                { img: "../../static/img/bangzhu.png", title: "帮助中心" }
            ],
            showman: false,
            users: {}
        };
    },
    methods: {
        ...mapMutations('mine',['falShowMine']),
        goLogin() {
            this.$router.push("/denglu");
        },
        outLogin() {
            sessionStorage.removeItem("user");
            this.falShowMine();
        }
    },
    mounted() {
        // console.log(this.$store.state.mine.showMine);
        if (sessionStorage.getItem("user")) {
            this.users = JSON.parse(sessionStorage.getItem("user"));
            this.showman = true;
        } else {
            this.showman = false;
        }
    }
};
</script>

<style scoped>
ul {
    list-style: none;
}
.tops {
    margin-top: 0.054rem;
}
.mar_bot {
    width: 100%;
    height: 0.054rem;
    margin-bottom: 0.38rem;
}
.item {
    padding: 0 0.11679rem;
    line-height: 1.5;
    display: flex;
    justify-content: space-between;
    height: 0.3426rem;
    align-items: center;
    border-bottom: 1px solid rgba(74, 74, 74, 0.1);
}
.items {
    padding: 0 0.11679rem;
    line-height: 1.5;
    display: flex;
    justify-content: space-between;
    height: 0.3426rem;
    align-items: center;
}
.bor_bot {
    border-bottom: 1px solid rgba(74, 74, 74, 0.1);
}

.fons_img {
    width: 0.125rem;
    height: 0.125rem;
}
.items_wp {
    border-bottom: 1px solid rgba(74, 74, 74, 0.1);
    display: flex;
    justify-content: space-between;
    width: 100%;
    align-items: center;
    height: 100%;
}
.last {
    display: flex;
    justify-content: space-between;
    width: 100%;
    align-items: center;
    height: 100%;
}
.mines {
    background-color: #f4f4f4;
    min-height: 100%;
}
.header {
    background-color: #d2ab44;
    height: 1.152rem;
    width: 100%;
}
.user {
    display: flex;
    align-items: center;
    height: 100%;
}
.user_img {
    height: 0.64rem;
    margin-left: 0.1rem;
    width: 0.64rem;
}
.user p {
    font-size: 0.173rem;
    color: #fff;
    margin-left: 0.1rem;
    font-weight: normal;
    cursor: pointer;
}
.dingdan {
    font-size: 0.11rem;
    margin-left: 0.05rem;
}
.dingdans {
    font-size: 0.11rem;
    color: #4a4a4a;
    margin-left: 0.05rem;
}
.more {
    font-size: 0.11rem;
    color: #4a4a4a;
}
.fon_img {
    width: 0.187rem;
    height: 0.187rem;
}
.item_left {
    display: flex;
    align-items: center;
}
</style>
